﻿@page "/components/appbar"

<DocsPage>
    <DocsPageHeader Title="App Bar" SubTitle="App bar is used to display actions, branding, navigation and screen titles.">
        <Description>
            Keeping the app bar persistant while browsing different pages will ease navigation and access to actions for your user.
        </Description>
    </DocsPageHeader>
    <DocsPageContent>
        <DocsPageSection>
            <SectionHeader>
                <Title>Regular App Bar</Title>
                <Description>
                    <MudText Class="py-6">App bars have two types: regular and contextual action bar. Below is an example of a regular app bar.</MudText>
                    <MudText>A contextual action bar is something that will provide actions for a selected item on the page.</MudText>
                    <MudText>A top bar can transform into a contextual action bar and be dismissed at any time.</MudText>
                </Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <AppBarSimpleExample />
            </SectionContent>
            <SectionSource Code="AppBarSimpleExample" GitHubFolderName="AppBar"  />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Elevation</Title>
                <Description>You can change the App Bar elevation, with values from 0-24</Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <AppBarElevationExample />
            </SectionContent>
            <SectionSource Code="AppBarElevationExample" GitHubFolderName="AppBar"  />
        </DocsPageSection>
        <DocsPageSection>
            <SectionHeader>
                <Title>Dense</Title>
                <Description></Description>
            </SectionHeader>
            <SectionContent DarkenBackground="true" DisplayFlex="true">
                <AppBarDenseExample />
            </SectionContent>
            <SectionSource Code="AppBarDenseExample" GitHubFolderName="AppBar"  />
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
